<template>
    <div style="margin-top: 50px">

        <!--销售出库标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">销售出库</span>
            </div></el-col>
        </el-row>

        <!--供应商和采购人-->
        <el-row style="margin-top: 20px">
            <el-col :span="8"><div class="grid-content bg-purple">
                <select style="margin-left: 20px;width: 200px;height: 28px;" id="customId" @change="findAll">
                    <option v-for="custom in customs" :key="custom" :value="custom.id">{{custom.name}}</option>
                </select>
            </div></el-col>

            <el-col :span="8"><div class="grid-content bg-purple-light">
                <span>销售员: </span> <span>{{username}}</span>
            </div></el-col>

            <el-col :span="8"><div class="grid-content bg-purple">
                <span>订单总额: </span> <span>{{totalMoney}}</span>
            </div></el-col>
        </el-row>

        <!--送货地址框-->
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <div style="float: left;margin-left: 80px;margin-top: 20px">
                    <span>送货地址</span> <el-input v-model="address" placeholder="请输入地址" style="width: 70%;"></el-input>
                </div>
            </div></el-col>
        </el-row>

        <span style="float: left;font-weight: bold;margin: 10px;margin-left: 50px">出库物品</span>

        <!--出库商品购物车-->
        <el-row style="margin-top: 15px;margin-left: 25px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <template>
                    <el-table
                            ref="singleTable"
                            :data="tableData"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            height="280"
                            style="width:55%">
                        <el-table-column
                                type="index"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                property="name"
                                label="商品名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                property="mill"
                                label="厂家"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                property="num"
                                label="现有库存"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                property="sale"
                                label="建议销售价"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                label="出库数量"
                                width="280">

                            <template slot-scope="scope">
                                <el-input v-model="scope.row.count" :placeholder="请输入数量" @input="getNum"  @change="update(scope.row.id)"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div></el-col>
        </el-row>

        <!--按钮-->
        <div style="float: left; margin-left: 45px;margin-top: 50px">
            <el-button type="success" @click="addShow">添加商品</el-button>
            <el-button type="success" @click="del">移除商品</el-button>
            <el-button type="success" @click="output">出库</el-button>
        </div>

        <!--添加页面-->
        <el-dialog
                title="添加出库商品"
                :visible.sync="dialogVisible"
                width="70%">
            <!--表格-->
            <el-row style="margin-top: 25px;margin-left: 50px">
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :data="productData"
                                width="40%"
                                height="250"
                                highlight-current-row
                                @current-change="handleCurrentChange1">
                            <el-table-column
                                    property="name"
                                    label="商品名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    property="mill"
                                    label="厂家"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    property="sale"
                                    label="建议销售价"
                                    width="100">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>

            <!--分页和查询还有按钮-->
            <el-row style="margin-top: 30px;margin-right: 400px">
                <el-col :span="14"><div class="grid-content bg-purple">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="pageSize"
                            @current-change="change">
                    </el-pagination>
                    <div style="margin-top: 100px">
                        <el-button type="success" @click="add">添加</el-button>
                    </div>
                </div></el-col>

                <el-col :span="10"><div class="grid-content bg-purple-light">
                    <el-card class="box-card" style="width:500px;">
                        <span>查询采购信息</span><br>
                        <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                            <el-form-item label="商品名称">
                                <el-input v-model="productName"></el-input>
                            </el-form-item>
                            <el-form-item label="类别">
                                <select style="width: 225px;height: 40px;" name="" id="typeId">
                                    <option v-for="type in types" :key="type" :value="type.id">{{type.name}}</option>
                                </select>
                            </el-form-item>
                        </el-form>
                        <el-button type="primary" @click="productList">查询</el-button>
                    </el-card>
                </div></el-col>
            </el-row>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "OutputCar",
        data(){
            return{
                //是否展示添加页面
                dialogVisible:false,

                //商品表格数据
                productData:"",
                //分页参数
                current:1,
                pageSize:4,
                total:30,

                //客户下拉款
                customs:"",
                //销售员id和名字
                username:"",
                userId:"",

                //修改购物车中出库的数据
                number:"",
                //出库商品购物车
                tableData:"",
                //购物车id
                outputId:"",
                //商品类别
                types:"",
                //商品名
                productName:"",
                //商品
                product:{},
                totalMoney: 0,
                address:"",

            }
        },
        //初始化页面
        mounted() {
            this.init();
            this.aob();
        },
        methods:{
            //单击表格获取对应行的数据
            handleCurrentChange(val){
                this.outputId = val.id
            },
            handleCurrentChange1(val){
                this.product = val
            },
            //初始化出库购物车
            init(){
                // console.log(this.$store.state.user.username);
                this.axios.get("jxc/custom/findAll").then(
                    r => {
                        this.customs = r.data;
                        let url = "jxc/outputCar/findAll/"+r.data[0].id;
                        this.axios.get(url).then(
                            r => {
                                this.tableData = r.data
                                let a = 0;
                                for (let i = 0; i < r.data.length; i++) {
                                    let outputCar = r.data[i];
                                    a += outputCar.count * outputCar.sale;
                                }
                                this.totalMoney = a;
                            }
                        )
                    }
                );

            },
            //获取客户下拉框值
            selectValue(){
                let id = document.getElementById("customId");
                return id.options[id.selectedIndex].value
            },
            //根据客户id填充表格
            findAll(){
                let url = "jxc/outputCar/findAll/"+this.selectValue();
                this.axios.get(url).then(
                    r => {
                        this.tableData = r.data
                        let a = 0;
                        for (let i = 0; i < r.data.length; i++) {
                            let outputCar = r.data[i];
                            a += outputCar.count * outputCar.sale;
                        }
                        this.totalMoney = a;

                    }
                )
            },
            //获取到输入款的数量
            getNum(number){
                this.number = number;
            },
            //修改购物车数量
            update(id){
                if (){

                }
                console.log(id);
                console.log(this.number);
                let url = "jxc/outputCar/update/"+id+"/"+this.number;
                this.axios.put(url).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration:1000
                            });
                        }this.findAll();
                    }
                )
            },
            //删除购物车
            del(){
                let url = "jxc/outputCar/del/"+this.outputId;
                this.axios.delete(url).then(
                    r => {
                        if (r.data == "ok"){
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration:1000
                            });
                        }else if (r.data == "no"){
                            this.$message({
                                message: '删除失败',
                                type: 'error',
                                duration:1000
                            });
                        }
                        this.findAll();
                    }
                )
            },
            //页码改变触发事件
            change(current){
                this.current = current;
                this.addShow();
            },

            //添加商品
            addShow(){
                this.axios.get("jxc/product/findByItemAndPage",{params:{
                        current:this.current,
                        pageSize:this.pageSize,
                    }}).then(
                    r => {
                        this.productData = r.data.records;
                        this.total = r.data.total;
                    }
                );
                this.axios.get("jxc/type/findAll").then(
                    r => {
                        this.types = r.data
                    }
                );
                this.dialogVisible = true;
            },
            //获取商品分页对象
            productList(){
                this.axios.get("jxc/product/findByItemAndPage",{params:{
                        current:this.current,
                        pageSize:this.pageSize,
                        productName:this.productName,
                        typeId: this.getTy()
                    }}).then(
                    r => {
                        this.productData = r.data.records;
                        this.total = r.data.total;
                    }
                );
            },
            //获取typeId（类别id）
            getTy(){
                let type = document.getElementById("typeId");
                return type.options[type.selectedIndex].value;
            },

            //添加商品
            add () {
                console.log()
                let s = JSON.stringify(this.product);
                let selectValue1 = this.selectValue();
                let formData = new FormData();
                formData.append("productJson", s);
                formData.append("customId", selectValue1);
                formData.append("userId", this.userId);
                this.axios.post("jxc/outputCar/add", formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '添加失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.dialogVisible = false;

                        this.findAll();
                    }
                );

            },
            out(){
                if (this.address == ""){
                    this.$message.error('送货地址为空');
                    return false;
                }else{
                    return true;
                }
            },
            output(){
                if (this.out()){
                    let url = "jxc/outputCar/delAll/"+this.selectValue()+"/"+this.userId+"/"+this.totalMoney+"/"+this.address;
                    this.axios.delete(url).then(
                        r => {
                            if (r.data == "ok") {
                                this.$message({
                                    message: '出库成功',
                                    type: 'success',
                                    duration: 1000
                                });
                            } else if (r.data == "no") {
                                this.$message({
                                    message: '出库失败',
                                    type: 'error',
                                    duration: 1000
                                });
                            }
                            this.address= "";
                            this.findAll();
                        }
                    )
                }
            }
        },
        computed:{
            // eslint-disable-next-line vue/return-in-computed-property
            aob(){
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.username = this.$store.state.user.userBean.username;
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.userId =  this.$store.state.user.userBean.id
            }
        }

    }
</script>

<style scoped>

</style>